<template>
  <div class="edit">
    <van-form  @submit="onSubmit">
      <van-nav-bar
      title="编辑资料"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-field name="image">
      <template #input>
        <van-uploader :after-read="submitPic">
          <img  class="user-icon" :src="icon" alt="" />
          <van-button>点击更换头像</van-button>
        </van-uploader> 
      </template>
    </van-field> 
   <van-field
    v-model="name"
    label="昵称"
    name="name"
    placeholder="昵称"
    :rules="[{ required: true, message: '请填写昵称' }]"
  />
    <!-- 性别选择 -->
    <van-field
      clickable
      name="sex"
      :value="valueType.text"
      label="性别"
      :placeholder="sex"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!-- 生日选择 -->
    <van-field
      readonly
      clickable
      name="calendar"
      :value="birthday"
      label="生日"
      placeholder="点击选择日期"
      @click="showCalendar = true"
    />
    <van-calendar v-model="showCalendar" @confirm="onConfirmBirth" />
    <!-- 多文本输入框，显示签名 -->
    <van-field
      v-model="sign"
      rows="2"
      autosize
      name='sign'
      label="个性签名"
      type="textarea"
      maxlength="30"
      placeholder="请输入签名"
      show-word-limit
    />
    <van-button  class="sub" block size="small" type="info" native-type="submit">提交</van-button>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant';
import router from "../../router";
import axios from 'axios'
export default {
   name: "edit",
  data() {
    return {
      valueType: "",
      icon:"",
      name:'',
      sex:'',
      birthday:'',
      sign:'',
      columns: [
        { id: "1", text: "男生" },
        { id: "2", text: "女生" },
        { id: "3", text: "外星人" },
      ],
      showPicker: false,
      showCalendar: false,
    };
  },
  created(){
    let user_id=localStorage.getItem('user_id')
    axios.get("http://localhost:3000/get_user",{
        params:{
         id:user_id
        } 
      })
      .then((res)=> {
        // console.log(res.data.data.userlist);
        var user=res.data.data.userlist[0]
        this.name= user.name
        this.sign=user.sign
        this.sex=user.sex
        this.icon=user.icon
        this.birthday=user.birthday.substring(0,10)
      });
  },
  methods: {
  //确认性别
    onConfirm(value) {
      this.valueType = value;
      this.showPicker = false;
    },
    onClickLeft() {
      router.go(-1);
    },
    submitPic(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file.file);
      //点击头像实现预览功能 
      this.icon=require("../../assets/img/"+file.file.name)

      let params = new FormData();
      params.append("picture", file.file);
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios.post('http://localhost:3000/upload_img',params, config).then(res => {
        console.log(res.data.data);
        this.icon=res.data.data
      });   
    
    },

     onSubmit(values) {//完成修改，提交数据
       console.log(values);
       let user_id=localStorage.getItem('user_id')
       axios.get('http://localhost:3000/update_user', {
        params:{
          name:this.name,
          sex:this.valueType.text,
          icon:this.icon,
          sign:this.sign,
          user_id:user_id,
        }
      }).then(res => {
          Toast.success('修改成功')
          location.reload()
        
     }).catch(err => {
            console.log(err)
          })
  
    },
    onConfirmBirth(date) {
      //确认生日日期
      this.birthday = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      this.showCalendar = false;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-icon {
  color: black;
}
/deep/.van-nav-bar__text {
  color: #2196f3;
}
/deep/ .van-uploader{
  margin-left: 50%;
  left: -54.4px;
}
/deep/ .van-uploader__input-wrapper{
  display: flex;
  flex-direction: column;
}
/deep/ .van-button{
  border: 0px;
}
.user-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: relative;
  left: 50%;
  margin-left: -40px;
  margin-top: 20px;
}

.name {
  font-size: 14px;
  padding: 10px 10px 0 15px;
}

.sub{
    position: fixed;
    z-index: 2;
    right: 5px;
    top: 4px;
    width: 40px;
    border-radius: 10px;
}
/deep/ .van-field__body input::placeholder{
  color:rgb(22, 21, 21);
}
</style>